<template>
  <div class="channel">
    <div v-for="item in channel" :key="item.id" class="item" @click="skip(item.id)">
      <img :src="item.iconUrl" />
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()
defineProps(["channel"]);

const skip=(id)=>{
  router.push({
    name:'category',
    query:{id}
  })
}
</script>

<style scoped>
.channel {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 16px;
  background-color: #fff;
  /* border: 1px solid #000; */
}
.item {
  display: flex;
  flex-direction: column;
}
img {
  width: 50%;
  /* object-fit: cover; */
}
</style>
